<template>
  <div class="login">
    <div class="head">
      <img src="@/assets/login/log.png" alt />
    </div>
    <div class="cont">
      <div class="card">
        <div class="left">
          <div class="title">扫码登录</div>
          <div class="img"></div>
          <div>打开微信，使用微信扫码登录</div>
        </div>
        <div class="right">
          <div class="pos" @click="back">
            <span>登录</span>
          </div>
          <div class="tab flex" :style="{paddingTop: tabIndex === 1 ? '65px' : '32px'}">
            <div
              @click="tabIndex = index"
              :class="tabIndex === index ? 'select':''"
              v-for="(item,index) in tabList"
              :key="index"
            >{{ item.title }}</div>
          </div>
          <div class="form" v-if="tabIndex === 1">
            <div class="ipt" style="margin-bottom: 24px">
              <span class="t">中国 +86</span>
              <span class="border"></span>
              <el-input placeholder="请输入手机号码" v-model="form.mobile"></el-input>
            </div>
            <div class="ipt">
              <el-input
                maxlength="6"
                style="margin-left: 16px"
                placeholder="请输入验证码"
                v-model="form.code"
              ></el-input>
              <div class="code" :class="msg === '获取验证码' ? '':'gar_code'" @click="sendCode">{{ msg }}</div>
            </div>
          </div>
          <div class="form" style="marginTop: 16px;marginBottom: 16px" v-else>
            <div class="ipt" style="margin-bottom: 16px">
              <el-input
                maxlength="6"
                style="margin-left: 16px"
                placeholder="请输入账号"
                v-model="form.account"
              ></el-input>
            </div>
            <div class="ipt" style="padding-right: 15px;margin-bottom: 16px">
              <el-input
                maxlength="6"
                type="password"
                show-password
                style="margin-left: 16px"
                placeholder="请输入登录密码"
                v-model="form.password"
              ></el-input>
            </div>
            <div class="ipt" style="padding-right: 15px;margin-bottom: 16px">
              <el-input
                maxlength="6"
                type="password"
                show-password
                style="margin-left: 16px"
                placeholder="请确认登录密码"
                v-model="form.password_confirm"
              ></el-input>
            </div>

            <div class="ipt" style="margin-bottom: 16px">
              <span class="t">中国 +86</span>
              <span class="border"></span>
              <el-input placeholder="请输入手机号码" v-model="form.mobile"></el-input>
            </div>
            <div class="ipt">
              <el-input
                maxlength="6"
                style="margin-left: 16px"
                placeholder="请输入验证码"
                v-model="form.code"
              ></el-input>
              <div class="code" :class="msg === '获取验证码' ? '':'gar_code'" @click="sendCode">{{ msg }}</div>
            </div>
          </div>
          <div class="check" @click="tochange($event,'chech')">
            <img v-if="chech" src="@/assets/login/check.png" alt />
            <img v-else src="@/assets/login/nocheck.png" alt />登录即表示已阅读并同意
            <span class="span" id="user">《用户协议》</span>
            <span class="span" id="ys">《隐私政策》</span>
          </div>

          <div class="btn" :class="tabIndex === 0 ? 'padding-24':''">
            <el-button @click="onSubmit" type="primary" color="#0052D9">注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import loginApi from "@/api/modules/user.js"
import { useMyStore } from '@/store/modules/userInfo';

const myStore = useMyStore();
const changeState = (data) => { 
  myStore.changeVal(data)
}
let tabList = ref([
  {
    title: "账号密码注册"
  },
  {
    title: "手机号注册"
  }
]);
let tabIndex = ref(0);

let chech = ref(true);
let isLogin = ref(true);

const tochange = (e, title) => {
  let id = e.target.id;
  if (id) {
    return;
  }
  if (title === "chech") {
    chech.value = !chech.value;
  } else {
    isLogin.value = !isLogin.value;
  }
};

let form = reactive({
  account: "",
  password: "",
  password_confirm: "",
  mobile: "",
  code: "",
  channel: 4
});

let msg = ref("获取验证码");
let timer = null;
const sendCode = () => {
  if (msg.value !== "获取验证码") {
    return;
  }
  sendCodeApi();
  
};
const codeTipsChange = () => {
  let n = 59;
  msg.value = n + "s重新发送";
  timer = setInterval(() => {
    if (n === 1) {
      msg.value = "获取验证码";
      clearInterval(timer);
      return;
    }
    n--;
    msg.value = n + "s重新发送";
  }, 1000);
}
const sendCodeApi = ()=> { 
  loginApi.sendCode( {
      mobile: form.mobile,
      scene: "ZC"
    }
  ).then(res => { 
    ElMessage.success("发送成功")
    codeTipsChange();
  })
}
const router = useRouter();
const back = () => {
  router.go(-1);
};
const registerSubmit = () => { 
  loginApi.register({
    ...form
  }).then(res => { 
    regSuccess(res)
  })
}
const mobileRegisterSubmit = () => { 
  loginApi.mobileRegister({
    ...form
  }).then(res => { 
    regSuccess(res)
  })
}
const regSuccess = res => { 
  changeState(res.data)
  localStorage.setItem('userInfo', JSON.stringify(res.data)) 
  if (isLogin.value) { 
    localStorage.setItem('token', res.data.token)
  } else {
    sessionStorage.setItem('token', res.data.token)
  }
  router.push("/")
}
const onSubmit = () => { 
  if (!tabIndex.value) {
    registerSubmit()
  } else { 
    mobileRegisterSubmit()
  }
} 

</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  box-shadow: 0 0 0 1px transparent inset;
  padding: 0;
}
::v-deep .el-input {
  flex: 1;
}
.btn {
  padding: 80px 80px 0;
  .el-button--primary {
    width: 100%;
    height: 48px;
    border-radius: 4px;
  }
}
.padding-24 {
  padding-top: 24px;
}
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .head {
    width: 100%;
    height: 62px;
    flex-shrink: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    img {
      margin-left: 66px;
    }
  }
  .cont {
    flex: 1;
    width: 100%;
    background: url("@/assets/login/bg.png") no-repeat;
    background-size: 100% 1018px;
    position: relative;
    .card {
      position: absolute;
      top: 218px;
      right: 150px;
      background: #ffffff;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      .left {
        width: 346px;
        height: 520px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .title {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          color: #202020;
          line-height: 33px;
        }
        .img {
          width: 200px;
          height: 200px;
          margin: 12px 0 5px;
          background-color: #a2a6ad;
        }
        .tips {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #a2a6ad;
          line-height: 20px;
        }
      }
      .left::after {
        content: "";
        height: 419px;
        width: 1px;
        background: #d6dce0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
      }
      .right {
        width: 500px;
        height: 520px;
        position: relative;
        .check {
          margin-left: 80px;
          margin-bottom: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #202020;
          line-height: 16px;
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            margin-right: 8px;
            display: flex;
            align-items: center;
          }
          .span {
            color: #0052d9;
            cursor: pointer;
          }
        }
        .form {
          margin: 30px 0 20px 80px;
        }
        .ipt {
          width: 340px;
          height: 48px;
          background: #ffffff;
          border: 1px solid #d6dce0;
          border-radius: 4px;
          display: flex;
          align-items: center;
          .code {
            width: 6em;
            margin-right: 16px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #0052d9;
            line-height: 20px;
            position: relative;
            cursor: pointer;
          }
          .code::after {
            position: absolute;
            top: 50%;
            left: -16px;
            transform: translateY(-50%);
            content: "";
            width: 1px;
            height: 20px;
            background: #d6dce0;
          }
          .gar_code {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: center;
            color: #a2a6ad;
            line-height: 20px;
          }
          .t {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #121924;
            line-height: 20px;
            margin: 0 12px 0 16px;
          }
          .border {
            width: 1px;
            height: 20px;
            background: #d6dce0;
            margin-right: 12px;
          }
        }
        .tab {
          padding-top: 62px;
          padding-left: 80px;
          font-size: 20px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #575966;
          line-height: 28px;
          div {
            margin-right: 30px;
            cursor: pointer;
          }
          .select {
            color: #202020;
            position: relative;
          }
          .select::after {
            content: "";
            width: 100%;
            height: 5px;
            background: #0052d9;
            position: absolute;
            bottom: -4px;
            left: 0;
          }
        }
        .pos {
          position: absolute;
          width: 72px;
          height: 72px;
          top: 0;
          right: 0;
          background: url("@/assets/login/zhuce.png") no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          span {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            color: #ffffff;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>